/****************************/
/* TOOL BUTTON (i.e Pages, Content, Devices, etc ...) */
/****************************/

// UP
$TOOL-BUTTON--COLOR: (
        LIGHT: _color("primary", c),
        DARK: _color("primary", c),
);

// HOVER
$TOOL-BUTTON--COLOR---HOVER: (
        LIGHT: _color("primary"),
        DARK: _color("white"),
);

// SELECTED
$TOOL-BUTTON--COLOR---SELECTED: (
        LIGHT: _color("tertiary"),
        DARK: _color("tertiary"),
);

// SELECTED HOVER
$TOOL-BUTTON--COLOR---SELECTED-HOVER: (
        LIGHT: _color("tertiary"),
        DARK: _color("tertiary"),
);


/****************************/
/* REGULAR BUTTONS */
/****************************/

// UP
$BUTTON--COLOR: (
        LIGHT: _color("white"),
        DARK: _color("white"),
);

$BUTTON--BG: (
        LIGHT: _color("quaternary"),
        DARK: _color("quaternary"),
);

// HOVER
$BUTTON--COLOR---HOVER: (
        LIGHT: _color("white"),
        DARK: _color("white"),
);

$BUTTON--BG---HOVER: (
        LIGHT: _color("quaternary", a),
        DARK: _color("quaternary", a),
);


/****************************/
/* WANRING BUTTONS */
/****************************/

// UP
$BUTTON-WARNING--COLOR: (
        LIGHT: _color("white"),
        DARK: _color("white"),
);

$BUTTON-WARNING--BG: (
        LIGHT: _color("status", error),
        DARK: _color("status", error),
);

// HOVER
$BUTTON-WARNING--COLOR---HOVER: (
        LIGHT: _color("white"),
        DARK: _color("white"),
);

$BUTTON-WARNING--BG---HOVER: (
        LIGHT: _color("status", error),
        DARK: _color("status", error),
);


/****************************/
/* DISCREET BUTTONS */
/****************************/

// UP
$BUTTON-DISCREET--COLOR: (
        LIGHT: _color("primary", b),
        DARK: _color("primary", b),
);

$BUTTON-DISCREET--BG: (
        LIGHT: _color("secondary", b),
        DARK: _color("secondary", b),
);

// HOVER
$BUTTON-DISCREET--COLOR---HOVER: (
        LIGHT: _color("primary", a),
        DARK: _color("primary", a),
);

$BUTTON-DISCREET--BG---HOVER: (
        LIGHT: _color("secondary", c),
        DARK: _color("secondary", c),
);


/****************************/
/* ACTION BUTTONS */
/****************************/

// DEFAULT UP
$ACTION-DEFAULT--COLOR: (
        LIGHT: _color("secondary"),
        DARK: _color("primary"),
);

$ACTION-DEFAULT--BG: (
        LIGHT: _color("primary"),
        DARK: _color("secondary", a),
);

$ACTION-DEFAULT--SHADOW: (
        LIGHT: 0px 1px 2px _color("black", a),
        DARK: 0px 1px 2px _color("black", a),
);

// DEFAULT HOVER
$ACTION-DEFAULT--COLOR---HOVER: (
        LIGHT: _color("secondary"),
        DARK: _color("primary"),
);

$ACTION-DEFAULT--BG---HOVER: (
        LIGHT: _color("primary", a),
        DARK: _color("secondary"),
);

$ACTION-DEFAULT--SHADOW---HOVER: (
        LIGHT: 0px 1px 2px _color("black", b),
        DARK: 0px 1px 2px _color("black", b),
);

// SUGGESTED UP
$ACTION-SUGGESTED--COLOR: (
        LIGHT: #FCFCFC,
        DARK: #FCFCFC,
);

$ACTION-SUGGESTED--BG: (
        LIGHT: _color("tertiary", normal),
        DARK: _color("tertiary", normal),
);

$ACTION-SUGGESTED--SHADOW: (
        LIGHT: 0px 1px 2px _color("black", a),
        DARK: 0px 1px 2px _color("black", a),
);

// SECONDARY UP
$ACTION-SECONDARY--COLOR: (
        LIGHT: _color("tertiary", normal),
        DARK: _color("tertiary", normal),
);

$ACTION-SECONDARY--BG: (
        LIGHT: transparent,
        DARK: transparent,
);

$ACTION-SECONDARY--SHADOW: (
        LIGHT: 0px 1px 2px _color("black", a),
        DARK: 0px 1px 2px _color("black", a),
);

// WORK IN PROGRESS
$ACTION-WIP--COLOR: (
        LIGHT: _color("black"),
        DARK: _color("black"),
);

$ACTION-WIP--BG: (
        LIGHT: _color("septenary"),
        DARK: _color("septenary"),
);

$ACTION-WIP--SHADOW: (
        LIGHT: 0px 1px 2px _color("black", a),
        DARK: 0px 1px 2px _color("black", a),
);

// WORK IN PROGRESS HOVER
$ACTION-WIP--COLOR---HOVER: (
        LIGHT: _color("black"),
        DARK: _color("black"),
);

$ACTION-WIP--BG---HOVER: (
        LIGHT: _color("septenary"),
        DARK: _color("septenary"),
);

$ACTION-WIP--SHADOW---HOVER: (
        LIGHT: 0px 1px 2px _color("black", a),
        DARK: 0px 1px 2px _color("black", a),
);

// SUGGESTED HOVER
$ACTION-SUGGESTED--COLOR---HOVER: (
        LIGHT: _color("secondary"),
        DARK: _color("secondary"),
);

$ACTION-SUGGESTED--BG---HOVER: (
        LIGHT: _color("tertiary", a),
        DARK: _color("tertiary", a),
);

$ACTION-SUGGESTED--SHADOW---HOVER: (
        LIGHT: 0px 1px 2px _color("black", b),
        DARK: 0px 1px 2px _color("black", b),
);

// SECONDARY HOVER
$ACTION-SECONDARY--COLOR---HOVER: (
        LIGHT: _color("tertiary", a),
        DARK: _color("tertiary", a),
);

$ACTION-SECONDARY--BG---HOVER: (
        LIGHT: transparent,
        DARK: transparent,
);

$ACTION-SECONDARY--SHADOW---HOVER: (
        LIGHT: 0px 1px 2px _color("black", b),
        DARK: 0px 1px 2px _color("black", b),
);
